<template>
  <el-form
    ref="menuSearchForm"
    :model="menuSearch"
    label-width="100px"
    :inline="true"
    size="small"
  >
    <el-form-item label="菜单名称" prop="name">
      <el-input v-model="menuSearch.name"></el-input>
    </el-form-item>
    <el-form-item label="启停状态" prop="isEnable">
      <el-select v-model="menuSearch.isEnable" placeholder="启停状态" >
        <el-option label="全部" value="ALL"/>
        <el-option label="启用" :value="true"/>
        <el-option label="停用" :value="false"/>
      </el-select>
    </el-form-item>
    <el-form-item label="菜单类型" prop="menuType">
      <el-select v-model="menuSearch.menuType" placeholder="菜单类型" >
        <el-option label="全部" value="ALL"/>
        <el-option label="目录" value="M"/>
        <el-option label="菜单" value="C"/>
        <el-option label="按钮" value="F"/>
      </el-select>
    </el-form-item>
    <el-form-item class="btn">
      <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
      <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    menuSearch: {
      type: Object,
      required: true,
    },
  },
  methods: {
    onSearch() {
      this.$emit("onSearch");
    },
    reset() {
      this.$refs.menuSearchForm.resetFields();
    },
  },
  beforeDestroy() {
    this.$refs.menuSearchForm.resetFields();
  },
};
</script>

<style scoped lang="scss">
.el-button {
  padding-left: 25px;
  padding-right: 30px;
}
.btn {
  margin-left: 30px;
}
</style>
